<template>
	<div class="app-container">
		<el-row v-if="communityParkingTotal !== 0" style="color:grey;text-align:right">
			本小区共<span style="color:#515A6E">{{communityParkingTotal}}</span>个车位，租用中<span
				style="color:#EE6B70">{{communityRenting}}</span>个车位,空闲<span
				style="color:#1ABC9C">{{communityParkingTotal-communityRenting}}</span>个车位
		</el-row>
		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
			label-width="68px">
			<el-form-item label="所属小区" prop="community">
				<el-select v-model="selectedCommunityId" @change="handleSelectChange">
					<el-option v-for="item in communities" :key="item.communityId" :label="item.communityName"
						:value="item.communityId">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="所属区域" prop="area">
				<el-select v-model="selectCommunityRegionId" @change="handleSelectChange1">
					<el-option v-for="item in regions" :key="item.regionId" :label="item.regionName"
						:value="item.regionId">
					</el-option>
				</el-select>
			</el-form-item>
			<span style="margin-left: 40px;">状态：<el-tag type="danger" plain>租用中</el-tag><span
					style="margin-left: 10px;"><el-tag type="success" plain>空闲中</el-tag></span></span>
		</el-form>
		<el-row class="communityName">{{communityName}}</el-row>
		<el-row class="parkingBody">
			<el-row class="parkingBodyLeft"><el-row>{{parkingRegion}}</el-row></el-row>
			<el-row class="parkingBodyRight"><el-row class="parkingMin" v-for="item in parkingLocations"
					:key="item"><el-button @click="handleButtonClick(item.parkId,item.parkStatus)"
						:type="item.parkStatus==1? 'danger':'success'"
						plain>{{item.parkNum}}</el-button></el-row></el-row>
		</el-row>

		<!-- 添加或修改车位租赁对话框 -->
		<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
			<el-form ref="form" :model="form" :rules="rules" label-width="80px">
				<el-form-item label="车位位置" prop="parkingLocation">
					{{form.parkingLocation}}
				</el-form-item>
				<el-form-item label="车主姓名" prop="ownerName">
					<el-input v-model="form.ownerName" placeholder="请输入车主姓名" />
				</el-form-item>
				<el-form-item label="车主手机" prop="phone">
					<el-input v-model="form.phone" placeholder="请输入车主手机" />
				</el-form-item>
				<el-form-item label="身份证号" prop="idNumber">
					<el-input v-model="form.idNumber" placeholder="请输入身份证号" />
				</el-form-item>
				<el-form-item label="车牌号码" prop="licensePlate">
					<el-input v-model="form.licensePlate" placeholder="请输入车牌号码" />
				</el-form-item>
				<el-form-item label="起租时间" prop="startTime">
					<el-date-picker clearable v-model="form.startTime" type="date" value-format="yyyy-MM-dd"
						placeholder="请选择起租时间">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="结束时间" prop="endTime">
					<el-date-picker clearable v-model="form.endTime" type="date" value-format="yyyy-MM-dd"
						placeholder="请选择结束时间">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="总价" prop="total">
					{{form.total}}
				</el-form-item>
				<el-form-item label="备注信息" prop="remark">
					<el-input v-model="form.remark" placeholder="请输入备注信息" />
				</el-form-item>
				<!-- <el-form-item label="房间编号" prop="area">
					<el-select v-model="form.balconyunithomeId">
						<el-option v-for="item in balconyunithomeIds" :key="item.id" :label="item.id" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item> -->
				<el-form-item label="楼座" prop="balconyunithomeId">
					<el-select v-model="queryWbu.balconyId" placeholder="请选择楼座" @keyup.enter.native="handleQuery">
						<el-option v-for="item in balconyList" :key="item.balconyId" :label="item.balconyName"
							:value="item.balconyId">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="单元" prop="balconyunithomeId">
					<el-select v-model="queryWbu.unitId" placeholder="请选择单元" @keyup.enter.native="handleQuery">
						<el-option v-for="item in unitList" :key="item.unitId" :label="item.unitName"
							:value="item.unitId">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="房号" prop="balconyunithomeId">
					<el-select v-model="queryWbu.homeId" placeholder="请选择房号" @keyup.enter.native="handleQuery">
						<el-option v-for="item in homeList" :key="item.homeId" :label="item.homeNumber"
							:value="item.homeId">
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<style>
	.parkingMin {
		margin: 10px 20px;
		text-align: center;
		line-height: 40px;
		width: 70px;
		height: 40px;
		border-radius: 15px;
	}

	.parkingBody {
		display: flex;
	}

	.parkingBodyLeft {
		display: flex;
		/* border: 1px solid blue; */
		width: 90px;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.parkingBodyRight {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}

	.communityName {
		height: 50px;
		line-height: 50px;
		font-size: 20px;
		letter-spacing: 1px;
		background-color: #a7a8bd;
		text-align: center;
		color: #e9d7df
	}
</style>
<script>
	import {
		listPakingRent,
		getPakingRent,
		queryBalconyunithomeId,
		queryCostByCostId,
		queryTotal,
		queryParkingAndRentParkingTotal,
		selectWyParkingRentByParkId,
		queryParkNum,
		queryRegion1,
		queryCommunityList1,
		delPakingRent,
		addPakingRent,
		updatePakingRent
	} from "@/api/zlgl/pakingRent";
	import {
		addAllocation,
	} from "@/api/charge/allocation";
	import {
		getBalconyUnitHome
	} from "@/api/charge/allocation";
	export default {
		name: "PakingRent",
		dicts: ['wy_parking_status'],
		data() {
			return {
				costId: 0,
				cost: '',
				// time:null,
				//选择小区id
				selectedCommunityId: '',
				//选择区域id
				selectCommunityRegionId: '',
				//停车位区域
				parkingRegion: '',
				parkingLocations: [],
				//显示小区名称
				communityName: '请选择小区与区域哦(*^_^*)',
				//小区车位总数
				communityParkingTotal: 0,
				//小区车位租用中数量
				communityRenting: 0,
				// 遮罩层
				loading: true,
				// 选中数组
				ids: [],
				// 非单个禁用
				single: true,
				// 非多个禁用
				multiple: true,
				// 显示搜索条件
				showSearch: true,
				// 总条数
				total: 0,
				// 车位租赁表格数据
				pakingRentList: [],
				// 弹出层标题
				title: "",
				// 是否显示弹出层
				open: false,
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					community: null,
					area: null,
				},
				// 表单参数
				form: {
					id: null,
					parkingLocation: null,
					ownerName: null,
					phone: null,
					idNumber: null,
					licensePlate: null,
					price: null,
					startTime: null,
					endTime: null,
					total: null,
					remark: null,
					balconyunithomeId: null
				},
				//新增账单表单
				forms: {
					communicateId: '',
					balconyunithomeId: '',
					costId: ''
				},
				// 表单校验
				rules: {
					balconyunithomeId: [{
						required: true,
						message: '请选择位置信息',
						trigger: 'blur'
					}],
				},
				//全部小区列表
				communities: [],
				//小区下区域列表
				regions: [],
				//当前选择小区id
				communityId: '',
				regionId: '',
				//关联房间id集合
				balconyunithomeIds: [],
				costMore: '',
				queryWbu: {
					communityId: null,
					balconyId: null,
					unitId: null,
					homeId: null
				},
				// 楼座列表数据
				balconyList: [],
				// 单元列表数据
				unitList: [],
				// 房间列表数据
				homeList: [],
			};
		},
		created() {
			// this.getList();
			this.queryCommunityList();
		},
		mounted() {
			// this.queryCommunityList();
		},
		watch: {
			// 监听器，用于监听 form.startTime 的变化
			'form.startTime': function(newVal, oldVal) {
				console.log('起租时间发生变化：', newVal);
				// 在这里执行你想要的操作，比如验证日期等
				this.handleDateChange();
			},
			// 监听器，用于监听 form.endTime 的变化
			'form.endTime': function(newVal, oldVal) {
				console.log('结束时间发生变化：', newVal);
				// 在这里执行你想要的操作，比如验证日期等
				this.handleDateChange();
			},
			selectedCommunityId(newId) {

				this.queryWbu.communityId = newId
			},
			'queryWbu.communityId': {
				handler() {

					this.balconyList = []
					this.unitList = []
					this.homeList = []
					this.queryWbu.balconyId = null
					this.queryWbu.unitId = null
					this.queryWbu.homeId = null
					this.form.balconyunithomeId = null

					getBalconyUnitHome(this.queryWbu).then(res => {
						this.balconyList = res.data[0]

					})
				},
				deep: true,
				immediate: true
			},
			'queryWbu.balconyId': {
				handler() {


					this.unitList = []
					this.homeList = []
					this.queryWbu.unitId = null
					this.queryWbu.homeId = null
					this.form.balconyunithomeId = null
					getBalconyUnitHome(this.queryWbu).then(res => {
						this.unitList = res.data[1]

					})
				},
				deep: true,
				immediate: true
			},
			'queryWbu.unitId': {
				handler() {

					this.homeList = []
					this.queryWbu.homeId = null
					this.form.balconyunithomeId = null
					getBalconyUnitHome(this.queryWbu).then(res => {
						this.homeList = res.data[2]

					})
				},
				deep: true,
				immediate: true
			},
			'queryWbu.homeId': {
				handler(newId) {
					if (newId) {
						getBalconyUnitHome(this.queryWbu).then(res => {
							if (res.data.length > 3) {
								this.form.balconyunithomeId = res.data[3][0]
							}
						})
					}

				},
				deep: true,
				immediate: true
			},

		},
		methods: {
			handleDateChange() {
				if (this.form.startTime && this.form.endTime) {
					const time = {
						startTime: this.form.startTime,
						endTime: this.form.endTime
					};
					queryTotal(time).then(response => {
						return this.form.total = (response.data * this.cost) + this.costMore
					});
				}
			},

			//点击车位按钮后的方法
			handleButtonClick(parkId, parkStatus) {
				this.reset();
				queryBalconyunithomeId().then(response => {
					// console.log(response)
					this.balconyunithomeIds = response.data
				})
				this.form.parkingLocation = parkId
				if (parkStatus == 0) {
					this.open = true;
					this.title = '添加车位租赁'
				} else {
					selectWyParkingRentByParkId(parkId).then(response => {
						this.form = response.data;
						this.open = true;
						this.title = '修改车位租赁'
					})
				}
			},
			//选择区域id后的查询
			handleSelectChange1(value) {
				this.regionId = value
				this.parkingRegion = ''
				queryParkNum(value).then(response => {
					this.parkingLocations = response.rows
					this.parkingRegion = response.rows[0].region.regionName
					this.costId = response.rows[0].region.costId
					return queryCostByCostId(this.costId).then(response => {
						this.cost = response.data.costPrice
						this.costMore = response.data.costMore
					})
				})
			},
			//选择小区id后的方法
			handleSelectChange(value) {
				// value 就是选中的对象的id
				//查询区域
				this.communityId = value
				queryRegion1(value).then(response => {
					this.regions = response.rows
					this.communityName = response.rows[0].community.communityName
				})
				// 查询该小区下的所有车位总数和租用中车位总数
				queryParkingAndRentParkingTotal(value).then(response => {
					this.communityParkingTotal = response.data[0];
					this.communityRenting = response.data[1]
				})
			},
			/** 查询车位租赁列表 */
			getList() {
				this.loading = true;
				listPakingRent(this.queryParams).then(response => {
					this.pakingRentList = response.rows;
					this.total = response.total;
					this.loading = false;
				});
			},
			//根据小区id查询区域
			queryRegion() {

			},
			//查询所有的小区名称
			queryCommunityList() {
				queryCommunityList1().then(response => {
					this.communities = response.rows;
				})
				// console.log(this)
			},
			// 取消按钮
			cancel() {
				this.open = false;
				this.reset();
			},
			// 表单重置
			reset() {
				this.form = {
					id: null,
					parkingLocation: null,
					ownerName: null,
					phone: null,
					idNumber: null,
					licensePlate: null,
					price: null,
					startTime: null,
					endTime: null,
					total: null,
					remark: null,
					balconyunithomeId: null
				};
				this.resetForm("form");
			},

			/** 提交按钮 */
			submitForm() {
				this.$refs["form"].validate(valid => {
					if (valid) {
						if (this.form.id != null) {
							updatePakingRent(this.form).then(response => {
								this.$modal.msgSuccess("修改成功");
								this.open = false;
								this.getList();
								this.handleSelectChange(this.communityId);

								this.handleSelectChange1(this.regionId)
							});
						} else {
							addPakingRent(this.form).then(response => {
								this.$modal.msgSuccess("新增成功");
								this.open = false;
								this.getList();
								this.handleSelectChange(this.communityId);
								this.handleSelectChange1(this.regionId)
								this.forms.communicateId = this.selectedCommunityId
								this.forms.costId = this.costId
								this.forms.balconyunithomeId = this.form.balconyunithomeId
								addAllocation(this.forms).then(response => {
									console.log('sdfdsfds')
								})
							});
						}
					}
				});
			},
			/** 删除按钮操作 */
			handleDelete(row) {
				const ids = row.id || this.ids;
				this.$modal.confirm('是否确认删除车位租赁编号为"' + ids + '"的数据项？').then(function() {
					return delPakingRent(ids);
				}).then(() => {
					this.getList();
					this.$modal.msgSuccess("删除成功");
				}).catch(() => {});
			},
			/** 导出按钮操作 */
			handleExport() {
				this.download('zlgl/pakingRent/export', {
					...this.queryParams
				}, `pakingRent_${new Date().getTime()}.xlsx`)
			}
		},

	};
</script>